<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/certificate.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<section class="certificate" id="pdf">
<!--		<img class="certificate-bg" src="./images/cetificate-bg.jpg" alt="">-->
		<section class="details">
			<section class="name">{{ name }}</section>
			<section class="text">感谢您参加第八届全国青少年电子信息智能创新大赛{{ theme }}赛项。特此证明。</section>
			<section class="date">2021年4月18日</section>
		</section>
	</section>
</section>
<script src="../js/abkj/fun_tool.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
	$(function () {
		var tool = fun_tool()
		var vm = new Vue({
			el: '.wrapper',
			data: {
				width: 0,
				height: 0,
				name: tool.getUrlParam('name'),
				theme: tool.getUrlParam('theme')
			},
			mounted: function () {
				var $wrapper = $('.wrapper')
				var width = $wrapper.width()
				var height = width / (1920 / 960)
				var rate = height / 960
				$('.name').css({
					fontSize: 61 * rate + 'px',
					width: 313 * rate + 'px',
				})
				$wrapper.height(height)
				this.download()
			},
			methods: {
				download: function () {
					var ele = document.getElementById("pdf")
					html2canvas(
						ele,
						{
							dpi: 172,//导出pdf清晰度
							onrendered: function (canvas) {
								var contentWidth = canvas.width;
								var contentHeight = canvas.height;

								//一页pdf显示html页面生成的canvas高度;
								var pageHeight = contentWidth / 592.28 * 841.89;
								//未生成pdf的html页面高度
								var leftHeight = contentHeight;
								//pdf页面偏移
								var position = 0;
								//html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
								var imgWidth = 595.28;
								var imgHeight = 592.28 / contentWidth * contentHeight;

								var pageData = canvas.toDataURL('image/jpeg', 1.0);
								var pdf = new jsPDF('', 'pt', 'a4');

								//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
								//当内容未超过pdf一页显示的范围，无需分页
								if (leftHeight < pageHeight) {
									pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
								} else {
									while (leftHeight > 0) {
										pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
										leftHeight -= pageHeight;
										position -= 841.89;
										//避免添加空白页
										if (leftHeight > 0) {
											pdf.addPage();
										}
									}
								}
								pdf.save('参赛证明.pdf');
							},
							background: '#000'
							//背景设为白色（默认为黑色）
						}).then(function () {
							setTimeout(function () {
								window.close()
							}, 2000)
					})
				}
			}
		})
	})
</script>
</body>
</html>
